<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1688商品搜索系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .search-container {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .card {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: none;
            margin-bottom: 1rem;
        }
        .product-card {
            transition: transform 0.2s;
        }
        .product-card:hover {
            transform: translateY(-2px);
        }
        .loading {
            display: none;
            text-align: center;
            padding: 2rem;
        }
        .spinner-border {
            width: 3rem;
            height: 3rem;
        }
        .chart-container {
            position: relative;
            height: 300px;
            margin: 1rem 0;
        }
        .stats-card {
            background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        .tag {
            display: inline-block;
            background: #e9ecef;
            color: #495057;
            padding: 0.25rem 0.5rem;
            margin: 0.125rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
        }
        .pagination-container {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .analysis-section {
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 2px solid #dee2e6;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 搜索区域 -->
        <div class="search-container">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <h1 class="text-center mb-4">
                            <i class="fas fa-search"></i> 1688商品搜索系统
                        </h1>
                        <div class="card">
                            <div class="card-body">
                                <form id="searchForm">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="keyword" class="form-label">搜索关键字</label>
                                            <input type="text" class="form-control" id="keyword" placeholder="请输入商品关键字" required>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label for="province" class="form-label">省份</label>
                                            <select class="form-select" id="province">
                                                <option value="">全国</option>
                                                <option value="广东">广东</option>
                                                <option value="浙江">浙江</option>
                                                <option value="江苏">江苏</option>
                                                <option value="山东">山东</option>
                                                <option value="河北">河北</option>
                                                <option value="河南">河南</option>
                                                <option value="湖北">湖北</option>
                                                <option value="湖南">湖南</option>
                                                <option value="四川">四川</option>
                                                <option value="福建">福建</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label for="city" class="form-label">城市</label>
                                            <input type="text" class="form-control" id="city" placeholder="可选">
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <button type="submit" class="btn btn-primary btn-lg">
                                            <i class="fas fa-search"></i> 开始搜索
                                        </button>
                                        <button type="button" class="btn btn-success btn-lg ms-2" id="exportBtn" disabled>
                                            <i class="fas fa-download"></i> 导出CSV
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载状态 -->
        <div class="loading" id="loading">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-3">正在搜索商品，请稍候...</p>
        </div>

        <!-- 搜索结果 -->
        <div class="container mt-4" id="resultsContainer" style="display: none;">
            <!-- 统计信息 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <h5 class="card-title">总商品数</h5>
                            <h2 id="totalProducts">0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <h5 class="card-title">平均价格</h5>
                            <h2 id="avgPrice">¥0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <h5 class="card-title">平均销量</h5>
                            <h2 id="avgSales">0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <h5 class="card-title">数据完整率</h5>
                            <h2 id="completeness">0%</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品列表 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">搜索结果</h5>
                </div>
                <div class="card-body">
                    <div id="productsList"></div>
                    
                    <!-- 分页 -->
                    <div class="pagination-container">
                        <nav>
                            <ul class="pagination" id="pagination"></ul>
                        </nav>
                    </div>
                </div>
            </div>

            <!-- 分析图表 -->
            <div class="analysis-section">
                <h3 class="text-center mb-4">数据分析</h3>
                
                <div class="row">
                    <!-- 数据完整性 -->
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">数据完整性分析</h6>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="completenessChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 价格分布 -->
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">价格分析</h6>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="priceChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 热门标签 -->
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">热门标签</h6>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="tagsChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 样例商品 -->
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">样例商品</h6>
                            </div>
                            <div class="card-body">
                                <div id="sampleProducts"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>